<template>
  <div class="wrapper">
    <div class="vidlogo">
      <!-- <img :src="course_info?course_info.app_logo:'' || ''" alt="" /> -->
<!--      <img src="https://vod.zhongke3.com/image/default/8A61E318B8864836B63324B6E71C4D61-6-2.png" alt="" />-->
    </div>
    <!-- <div class="prism-player" id="player-pt" ref="ptplayer" v-show="ptPlayer"></div> -->
    <div id="video-player" ></div>
  </div>
</template>
<script>
  import "./pt_player";
  export default {
    name: "ccPlayer",
    props: {
      // 所有视频的信息
      // course_info: {
      //   type: Object,
      //   require: true,
      // },
      // // 正在播放的视频的信息
      // video_info: {
      //   type: Object,
      //   require: true,
      // },
      // // a b
      // course_auth_status: {
      //   type: String,
      //   require: true,
      // },
      // // 当前播放的id 视频加载自动播放第一个
      // infoshangactive: {
      //   type: Object,
      //   require: true,
      // },
    },
    data() {
      return {
        // 片头
        pt_player: null,
        pt_url: null,
        AccessKeyId: null,
        AccessKeySecret: null,
        SecurityToken: null,
        ptPlayer: true,

        player: null,
        videoProps: {
          siteid: '',
          autoStart: true,
          realAutoPlay: true,
          width: "922",
          height: "519",
          rate_array: [2.0, 1.75, 1.5, 1.25, 1.0, 0.8, 0.5],
          isShowMoreBtn: false,
          allowKeyBoardTogglePlay: true,
          // logo: {
          //   url: require('@/assets/img/vidlogo.png'), // logo 地址
          //   opacity: 100, // 透明度 [0-100]
          //   position: 2, // logo位置原始点 1-左上，2-右上， 3-左下， 4-右下
          //   linkUrl: '', // logo跳转链接
          //   posX: 5, // logo相对于原始点的水平百分比距离
          //   posY: 7, // logo相对于原始点的垂直百分比距离
          //   size: 10, // 显示区域大小（相对于播放器宽高百分比）
          // },
        },


        // 记录信息
        kj_zt: this.kj_zt || "0",
        start_sj: this.start_sj,
        end_sj: this.end_sj,
      };
    },
    created() {
      this.setPlayerCallBack();

    },
    async mounted() {
      // console.log(this.video_info, 'this.video_info')
      // if (this.video_info.is_ad === '0') {
        // this.ptPlayer = false
        // return this.createPlayer()
      // }

      // if (this.course_info.cc_pt_url) {
      //   this.cc_pt_player();
      // } else {
      //   await this.get_pt_video();
      // }
      //  await this.get_video()
      if(window.ccH5PlayerJsLoaded) {
        // this.createPlayer()
      }
    },
    watch: {
      // video_info(val, oldVal) {
      //   console.log(val, 'val')
      //   console.log(oldVal, 'oldVal')

      //   this.player && (this.player.getVideoState() !== 'pause') && this.save_record(oldVal)

      //   if (val.is_ad === '0') return this.createPlayer()
      //   if (this.course_info.cc_pt_url) {
      //     this.ptPlayer = false
      //     this.player && this.player.destroy();
      //     this.cc_pt_player();
      //   } else {
      //     this.ptPlayer = true
      //     this.ptPlayer && this.pt_player.dispose()
      //     this.get_pt_video();
      //   }
      // }
    },
    methods: {
      init(data){
        this.video_info = data
        if(this.videoProps.siteid!=''){
          this.createPlayer()
        }else{
          this.$api.videoConfig().then(res=>{
            this.videoProps.siteid = res.data.userid
            this.createPlayer()
          })
        }
        // this.this.ptPlayer = false
      },
      // 片头
      // get_pt_video() {
      //   let obj = {};
      //   this.$api.choseClass.PlayAutha(obj).then((res) => {
      //     this.AccessKeyId = res.data.data.AccessKeyId;
      //     this.AccessKeySecret = res.data.data.AccessKeySecret;
      //     this.SecurityToken = res.data.data.SecurityToken;
      //     this.create_pt_player();
      //     console.log('pt-------')
      //   });
      // },
      // create_pt_player() {
      //   //改变下this指向
      //   let that = this;
      //   that.pt_player = new Aliplayer(
      //     {
      //       id: "player-pt",
      //       width: "922px",
      //       height: "519px",
      //       autoplay: true,
      //       isLive: false,
      //       cover: that.course_info.pic,
      //       vid: that.course_info.pt_url,
      //       accessKeyId: that.AccessKeyId,
      //       securityToken: that.SecurityToken,
      //       accessKeySecret: that.AccessKeySecret,
      //       region: "cn-shanghai", //eu-central-1,ap-southeast-1
      //       // controlBarVisibility: "always",
      //     },

      //     function (player) {
      //       player.on("ready", (e) => {
      //         player.play();
      //       });
      //       player.on("ended", (e) => {
      //         player.dispose();
      //         that.ptPlayer = false
      //         this.pt_player && this.pt_player.dispose();
      //         if(window.ccH5PlayerJsLoaded) {
      //           that.createPlayer()
      //         }
      //       });
      //     }
      //   );
      // },

      // cc_pt_player() {
      //   console.log('片头')
      //   this.ptPlayer = false
      //   console.log(this.ptPlayer)
      //   if (!this.videoProps.siteid){
      //     return this.cConfig()
      //   }

      //   this.player = window.createCCH5Player({
      //     vid: this.course_info.cc_pt_url,
      //     parentNode: document.getElementById("video-player"),
      //     ...this.videoProps
      //   });
      // },

      // CC
      cConfig() {
        // this.$api.choseClass.cConfig({}).then(res => {
        //   if (res.data.event === "100"){
        //     let userid = window.atob(res.data.data.userid)
        //     userid = userid.substring(4, userid.length)
        //     sessionStorage.setItem("ccUserid", userid)
        //     this.videoProps.siteid = userid
        //     console.log(this.videoProps, 'this.videoProps')
        //     this.cc_pt_player()
        //   }
        // })
      },
      pause(){
        window.cc_js_Player.pause()
      },
      createPlayer() {
        // if (!this.videoProps.siteid){
        //   return this.cConfig()
        // }
        // console.log(this.course_info, 'course_info')
        // console.log(this.video_info, 'video_info')

        this.player = window.createCCH5Player({
          // vid: this.video_info.url,
          // vid: '96B83BB85FE368B90498CE5AAF1F53F5',
          vid:this.video_info.dizhi,

          parentNode: document.getElementById("video-player"),
          ...this.videoProps
        });

      },
      // nextPlayer() {
      //   this.player && this.player.destroy();
      //   this.createPlayer();
      // },
      setPlayerCallBack() {
        window.onCCH5PlayerLoaded = this.onCCH5PlayerLoaded
        window.on_CCH5player_ready = this.onPlayerReady;
        window.on_player_volumechange = this.onPlayerVolumeChange;

        window.on_switch_rate = this.on_switch_rate;
        window.on_CCH5player_pause = this.on_CCH5player_pause;
        window.on_CCH5player_ended = this.on_CCH5player_ended;
      },
      onCCH5PlayerLoaded() {
        window.ccH5PlayerJsLoaded = true;
        // this.createPlayer();
      },
      on_switch_rate (vid, newRate) {
        this.bfbs = newRate
      },

      onPlayerReady(obj) {
        // console.log('CCH5player_ready', obj)
        window.cc_js_Player.setVolume(0.3);
        // this.kj_zt = 0
        this.start_sj = new Date().valueOf();
      },
      onPlayerVolumeChange(volume, vid) {
        // console.log('设置音量回调:  ', volume, vid)
      },

      on_CCH5player_pause(video, vid) {  //暂停播放时回调
        // console.log(video, 'video')
        // console.log(vid, 'vid')
        // console.log(this.player.getPosition(), 'this.player.getPosition()')
      },
      on_CCH5player_ended(video, vid) {  //播放结束时回调
        console.log(video, 'video')
        this.$emit('endVideo',this.player.getPosition())
        // console.log('结束vid', vid)
		    // console.log('结束course_info',this.course_info)
        // if (vid === this.course_info.cc_pt_url) {
        //   console.log('播放课程')
        //   this.ptPlayer = false
        //   this.player && this.player.destroy();
        //   return this.createPlayer()
        // }

        // this.kj_zt = 1
        // this.save_record(this.video_info)
        // if (
        //   this.course_info.period_list.length >
        //   this.video_info.index + 1
        // ) {
        //   this.$emit(
        //     "play-video-by-index",
        //     this.course_info.period_list[this.video_info.index+1]
        //   );
        // } else if (
        //   this.course_info.period_list.length ==
        //   this.video_info.index + 1
        // ) {
        //   this.$emit(
        //     "play-video-by-index",
        //     this.course_info.period_list[0]
        //   );
        // }
      },





      //添加播放记录
      save_record(value) {

        // if (!this.player.getPosition()){
        //   return
        // }
        // let times = this.timeFormatter(this.player.getPosition());
        // this.$api.choseClass.insertVideoPlay({
        //   kc_id: this.course_info.id,
        //   kj_id: value.id,
        //   kj_zt: this.kj_zt || "0",
        //   start_sj: this.start_sj,
        //   end_sj: new Date().valueOf(),
        //   kj_jd: times,
        //   lx: "Web",
        //   bfsd: this.player.getCurrRate(),
        // });
      },
      timeFormatter(duration) {
        let secondTime = parseInt(duration); // 秒
        let minuteTime = 0; // 分
        let hourTime = 0; // 小时
        if (secondTime > 60) {
          // 如果秒数大于60，将秒数转换成整数
          // 获取分钟，除以60取整数，得到整数分钟
          minuteTime = parseInt(secondTime / 60);
          // 获取秒数，秒数取佘，得到整数秒数
          secondTime = parseInt(secondTime % 60);
          // 如果分钟大于60，将分钟转换成小时
          if (minuteTime > 60) {
            // 获取小时，获取分钟除以60，得到整数小时
            hourTime = parseInt(minuteTime / 60);
            // 获取小时后取佘的分，获取分钟除以60取佘的分
            minuteTime = parseInt(minuteTime % 60);
          }
        }
        let result = secondTime > 9 ? secondTime : "0" + secondTime;
        if (minuteTime > 0) {
          result =
            (minuteTime > 9 ? minuteTime : "0" + minuteTime) + ":" + result;
        } else {
          result = "00" + ":" + result;
        }
        if (hourTime > 0) {
          result = (hourTime > 9 ? hourTime : "0" + hourTime) + ":" + result;
        } else {
          result = "00" + ":" + result;
        }
        return result;
      },
      getPosition(){
        return this.player.getPosition();
      },

    },
    
    // destroyed() {
    //   this.end_sj = new Date().valueOf();
    //   this.save_record(this.video_info)
    //   this.player && this.player.destroy();
    // }
  };
</script>
<style lang="scss" scoped>
  .wrapper{
    position: relative;
  }
  #video-player {
    width: 922px;
    height: 519px;
    margin-top: -15px;
    position: relative;
    z-index: 1 !important;
  }
  .prism-player{
    margin-top: -15px;
    height: 519px;
    position: relative;
    z-index: 1 !important;
  }
  ::v-deep .ccH5Poster {
    align-items: normal !important;
  }
  ::v-deep .ccH5playerBox video {
    /*position: static !important;*/
  }
  .vidlogo {
    width: 90px;
    position: absolute;
    right: 3%;
    top: 4%;
    z-index: 999;
  img {
    width: 100%;
  }
  }
</style>
